<template>
  <div class="organization">
    <div class="organization-content">
      <!-- 返回按钮 -->
      <img
        class="icon-back"
        src="~/img/zdcyback.png"
        alt=""
        @click="closeMap"
      />
      <!-- 左侧固定栏 -->
      <!-- <img class="common-left" src="~img/images/left_line.png" alt="" /> -->
      <!-- 右侧固定栏 -->
      <!-- <img class="common-right" src="~img/images/right_line.png" alt="" /> -->
      <!-- 左侧内容区域（列表展示） -->
      <div
        class="organization-left"
        :class="{ active1: showCompoy, hiddens1: !showCompoy }"
        v-show="showTabAndLeft"
      >
        <SelectOrganization2
          :bankList="bankList"
          :types="types"
          :total="total"
          @searchCompany="searchCompany"
          @openArea="openArea"
          ref="selectCompany"
          @simpleCom="simpleCom"
        ></SelectOrganization2>
      </div>
      <!-- 左侧内容区域（路线展示） -->
      <div class="organization-route" v-if="showRoute">
        <SelectRoute
          @hideRoute="hideRoute"
          :endAddress="selectCompany"
          @drawRoute="drawRoute"
        ></SelectRoute>
      </div>
      <!-- 右侧内容区域 -->
      <!-- <div
        class="organization-right"
        :class="{ active: showLeft, hiddens: !showLeft }"
        v-show="showTabAndRight"
      >
        <SelectArea
          ref="selectArea"
          @setPosition="setPosition"
          @simpleLeft="simpleLeft"
        ></SelectArea>
      </div> -->
      <!-- 热力图的显示和隐藏 -->
      <div class="heat_tab" :class="{ active: heatStyle === 1 }" v-if="showZdcy">
        <!-- <img v-if="heatStyle === 0" src="~/img/images/heat_yes.png" alt="" @click="heatTab(1)" /> -->
        <!-- <img v-else src="~/img/images/heat_not.png" alt="" @click="heatTab(0)" /> -->
      </div>
      <!-- 地图 -->
      <div id="mapSituation"></div>
      <!-- 详情弹窗 -->
    </div>
    <!-- 展示企业关系 -->
    <mapDetail ref="mapDetail"> </mapDetail>
  </div>
</template>

<script>
// import SelectArea from 'components/Situation/SelectArea.vue';
import SelectOrganization2 from './components/selectOrganization2.vue';
// import Detail from 'components/Situation/Detail.vue';
import SelectRoute from './components/SelectRoute.vue';
import mapDetail from './components/mapDetail.vue';
import Back from './components/Back.vue';
// import { area1List, area2List, area3List, convertFrom } from '@/common/js/mapData.js';
// import { getBankingList } from '../../api/mapApi/mapApi';
// import { hotList1, hotList2 } from '@/common/js/const.js';
import { mapState } from 'vuex';
import mapConfig from './mixins/mapConfig';
import { list0 } from './map_point0.js'
import { list1 } from './map_point1.js'
import { list2 } from './map_point2.js'
import { list3 } from './map_point3.js'
import { list4 } from './map_point4.js'
// import {
//   getTempBankList,
//   getTempCreditList,
//   getNearByAllCorp,
//   getKeyIndustry,
//   getICInfoByCorpKey,
//   queryPointByRegionAndIndustryAndTab
// } from 'apis/Situation';
export default {
  name: 'organization',
  mixins: [mapConfig],
  components: {
    // SelectArea,
    SelectOrganization2,
    Back,
    SelectRoute,
    mapDetail
  },
  data() {
    return {
      type: '',
      activeIndex: 0,
      // tabList: ['普惠贷款企业', '首贷企业', '纳税企业'],
      tabList: ['企业单位', '银行机构'],
      heatmap: null,
      showLeft: false,
      showCompoy: false,
      showTabAndRight: true, // 展示左侧内容和顶部切换标签
      showTabAndLeft: true, // 展示左侧的部分
      bankList: [], // 列表数据
      bankListCopy: [], // 原始数据
      selectArea: null, // 选中的地区
      types: '2', // 筛选企业
      mapStyle: 0, // 默认为白天的样式
      heatStyle: 0, // 默认为展示热力图
      showRoute: false, // 展示路线规划
      selectCompany: null, // 选中的项信息
      zdcyIndex: 0, // 选中的重点产业标签
      zdcyList: [
        '电子信息',
        '数字经济',
        '高端装备制造',
        '生物医药',
        '集成电路',
        '汽车零部件',
        '先进材料',
        '软件服务',
        '航空航天'
      ],
      showZdcy: false, // 重点产业默认关闭
      total: 0,
      details: {},
      showDetails: false,
      userLat: '',
      userLng: ''
    };
  },
  computed: {
    ...mapState(['mapCopyInfos'])
  },
  async mounted() {
    console.log(this.$route, 'route');
    if (this.$route.params) {
      this.type = this.$route.params.val;
    }
    // 处理中心的位置
    this.dealPosition();
    const that = this;
    window.amapMarkerMoreEndFun = function () {
      that.openRoute();
    };
    // 默认是企业用户
    this.$nextTick(async () => {
      this.showLeft = true;
      this.showCompoy = true;
      that.initMap();
      // 撒点
      // this.getTempCreditList();
      this.getList();
    });
  },
  methods: {
    async getList(isBig = true) {
      let params = {
        // bigCorp: '1',
        companyType: '',
        distance: '',
        electricTrend: '',
        enterpriseName: '',
        industy: '',
        isBrokenPromises: '',
        isCloseTheCase: '',
        isCustomsCreditConfirmation: '',
        isEvaluation: '',
        isGoats: '',
        isGovpur: '',
        isHightech: '',
        isLoan: '',
        isProductionSafety: '',
        isTaxDepartmentAbnormalHousehold: '',
        isTel: '',
        isTrade: '',
        laborTrend: '',
        netProfitsTrend: '',
        numberOfCompanyUpperLimit: '',
        operatingState: '',
        patentTrend: '',
        punishEnvirNum: '',
        region: '',
        registeredCapitalUpperLimit: '',
        revenueLevel: '',
        scoreUpperLimit: '',
        smallAndMicroCorp: '',
        sortColumn: 'creditScore',
        sortRule: 'desc',
        taxLevel: '',
        technology: '',
        userLat: '',
        userLng: '',
        yearsOfEstablishUpperLimit: '',
        pageBO: {
          pageNum: 1,
          pageSize: 2000
        }
      };
      if (this.type == '大型') {
        params.bigCorp = '1';
        this.bankListCopy = list1.list;
      } else if (this.type == '中型') {
        this.bankListCopy = list2.list;
        params.middleCorp = '1';
      } else if (this.type == '小微') {
        params.smallAndMicroCorp = '1';
        this.bankListCopy = list3.list;
      } else if (this.type == '其他') {
        params.otherCorp = '1';
        this.bankListCopy = list4.list;
      } else {
        this.bankListCopy = list0.list;
      }
      console.log('地图筛选请求的数据', { ...params });

      // const res = await getNearByAllCorp({ ...params });
      // console.log(JSON.stringify(res), '地图筛选返回sss的数据');
      this.bankList = JSON.parse(JSON.stringify(this.bankListCopy));
      // console.log(JSON.stringify(this.bankListCopy.slice(0, 9)));
      // 初始化标记点
      this.seaMarkers(isBig);
    },
    dealPosition() {
      const area = this.GetQueryString('area');
      this.region = area || '苏州市';
      switch (area) {
        case '张家港市':
          this.userLng = '120.575185';
          this.userLat = '31.871066';
          break;
        case '常熟市':
          this.userLng = '120.77615';
          this.userLat = '31.666303';
          break;
        case '太仓市':
          this.userLng = '121.138132';
          this.userLat = '31.460087';
          break;
        case '昆山市':
          this.userLng = '120.974481';
          this.userLat = '31.355236';
          break;
        case '相城区':
          this.userLng = '120.635412';
          this.userLat = '31.374999';
          break;
        case '工业园区':
          this.userLng = '120.677934';
          this.userLat = '31.316626';
          break;
        case '姑苏区':
          this.userLng = '120.625637';
          this.userLat = '31.310624';
          break;
        case '高新区':
          this.userLng = '120.553665';
          this.userLat = '31.293654';
          break;
        case '吴中区':
          this.userLng = '120.628669';
          this.userLat = '31.236298';
          break;
        case '吴江区':
          this.userLng = '120.615612';
          this.userLat = '31.137954';
          break;
        default:
          this.userLng = '120.625637';
          this.userLat = '31.310624';
          break;
      }
      console.log(area, 'area');
    },
    closeMap() {
      this.$emit('closeMap')
    },
    GetQueryString(name) {
      // window.location.href 获取地址
      let url = window.location.href;
      let p = url.split('?')[1];
      let params = new URLSearchParams(p);
      return params.get(name);
    },
    // 企业筛选
    async getTempCreditList(isBig = true) {
      // this.bankList = [];
      // try {
      //   const params = {
      //     area: this.GetQueryString('area')
      //   };
      //   console.log('地图请求的数据', params);
      //   const res = await getBankingList(params);
      //   console.log(res, '地图返回的数据');
      //   this.bankListCopy = res.data;
      //   this.bankList = JSON.parse(JSON.stringify(this.bankListCopy));
      //   // console.log(JSON.stringify(this.bankListCopy.slice(0, 9)));
      //   // 初始化标记点
      //   this.seaMarkers(isBig);
      // } catch {
      //   this.$Message.error(this.$t('请求出错'));
      // }
    },
    // openArea(item) {
    //   console.log(item, 'item');
    //   this.openArea(item);
    // },
    simpleLeft() {
      this.showLeft = !this.showLeft;
    },
    openDetail(item) {
      this.$refs.mapDetail.showRelation(item.corpKey);
    },
    simpleCom() {
      this.showCompoy = !this.showCompoy;
    },

    searchCompany(item) {
      this.bankList = JSON.parse(JSON.stringify(this.bankListCopy)).filter(
        d =>
          d.d2CorpName &&
          (d.d2CorpName.indexOf(item.toLowerCase()) !== -1 ||
            d.d2CorpName.indexOf(item.toUpperCase()) !== -1)
      );
      // 初始化标记点
      this.seaMarkers();
    },
    goBack() {
      this.$router.go(-1);
    },
    //  白天黑夜的切换
    mapTab(type) {
      this.mapStyle = type;
      if (type === 0) {
        /** 设置主题 */
        window.document.documentElement.setAttribute('data-theme', 'light');
        const styleName = 'amap://styles/normal';
        this.mapInstance.setMapStyle(styleName);
      } else {
        window.document.documentElement.setAttribute('data-theme', 'dark');
        const styleName = 'amap://styles/darkblue';
        this.mapInstance.setMapStyle(styleName);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
//根据自己情况调节
@keyframes slide-in {
  0% {
    transform: translateX(-360px);
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(-360px);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-360px);
  }
}

@-webkit-keyframes slide-out {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-360px);
  }
}

@keyframes slide-in1 {
  0% {
    transform: translateX(500px);
  }
}

@-webkit-keyframes slide-in1 {
  0% {
    transform: translateX(500px);
  }
}

@keyframes slide-out1 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(500px);
  }
}

@-webkit-keyframes slide-out1 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(500px);
  }
}

.organization {
  // width: 100%;
  // height: 100%;
  min-width: 1920px;
  min-height: 1080px;
  position: absolute;
  // top: 26%;
  // transform: scale(1,2);
  overflow: hidden;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: left top;
  // padding: 0 64px;
  box-sizing: border-box;

  .organization-content {
    position: relative;
    width: 100%;
    height: 100%;

    #mapSituation {
      // width: 100%;
      // height: 100%;
      min-width: 1920px;
      min-height: 1080px;
    }
    .icon-back {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 160px;
      cursor: pointer;
    }
    .common-left {
      position: absolute;
      left: 24px;
      top: 138px;
      z-index: 98;
      width: 25px;
      height: 860px;
    }

    .common-right {
      position: absolute;
      right: 24px;
      top: 138px;
      z-index: 98;
      width: 25px;
      height: 860px;
    }

    .organization-right {
      position: absolute;
      top: 0;
      right: -360px;
      bottom: 0;
      width: 360px;
      z-index: 98;
      padding: 100px 0 0 48px;
      // @include background('bgColor2');

      &.active {
        // left: 0;
        animation: slide-out 0.7s forwards;
        -webkit-animation: slide-out 0.7s forwards;
      }

      &.hiddens {
        // left: 0;
        animation: slide-in 0.7s;
        -webkit-animation: slide-in 0.7s;
      }
    }

    .organization-route {
      position: absolute;
      top: 0;
      left: 44px;
      bottom: 66px;
      width: 455px;
      z-index: 98;
      padding: 100px 48px 0 0;
    }

    .organization-left {
      // position: absolute;
      // top: 0;
      // left: 44px;
      // bottom: 66px;
      // width: 455px;
      // z-index: 98;
      // padding: 100px 48px 0 0;
      position: absolute;
      top: 0;
      left: -455px;
      bottom: 0;
      width: 455px;
      z-index: 98;
      padding: 100px 48px 0 0;

      &.active1 {
        // left: 0;
        animation: slide-out1 0.7s forwards;
        -webkit-animation: slide-out1 0.7s forwards;
      }

      &.hiddens1 {
        // left: 0;
        animation: slide-in1 0.7s;
        -webkit-animation: slide-in1 0.7s;
      }
    }

    /*滚动条*/
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: #f5f5f5;
    }

    /*定义滚动条的轨道，内阴影及圆角*/
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      background-color: #f5f5f5;
    }

    /*定义滑块，内阴影及圆角*/
    ::-webkit-scrollbar-thumb {
      /*width: 10px;*/
      height: 20px;
      border-radius: 6px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: rgb(32, 61, 129);

      &:hover {
        background-color: rgb(140, 140, 140);
      }
    }

    .company-detail {
      position: absolute;
      top: 200px;
      left: 505px;
      bottom: 40px;
      width: 455px;
      z-index: 98;
      background-color: #fff;
      border: 1px solid rgba(135, 227, 255, 0.72);
      box-shadow: 0px 0px 8px 0px rgba(90, 202, 255, 0.84), 0px 1px 42px 0px rgba(0, 89, 208, 0.26);
      overflow-y: scroll;
    }

    .tab-back {
      position: absolute;
      height: 95px;
      left: 0;
      top: 0;
      right: 0;
      z-index: 99;
      display: flex;
      justify-content: center;
      // background-image: url(~img/images/top_back.png);
      background-repeat: no-repeat;
      background-size: cover;
      font-size: 46px;
      font-weight: 400;
      color: #ade2fd;

      .organization-tabs {
        margin-top: 10px;
        display: flex;
        justify-content: center;

        .organization-body {
          width: 324px;
          height: 52px;
          display: flex;
          // justify-content: space-around;
          align-items: center;

          > div {
            width: 165px;
            height: 45px;
            font-size: 30px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #92d9ff;
            text-align: center;
            text-shadow: 1px 2px 5px rgba(7, 38, 87, 0.38);
            cursor: pointer;

            &.active {
              font-size: 18px;
              font-family: Source Han Sans SC;
              font-weight: 500;
              font-size: 34px;
              font-family: YouSheBiaoTiHei;
              font-weight: 400;
              color: #ffffff;
              line-height: 45px;
              text-shadow: 1px 2px 5px rgba(0, 62, 161, 0.84);
            }

            &:first-of-type {
              border-right: 1px solid #69bfff;
            }
          }
        }
      }
    }

    .zdcy-back {
      position: absolute;
      height: 85px;
      left: 0;
      top: 0;
      right: 0;
      z-index: 99;
      display: flex;
      justify-content: center;
      // background-image: url(~img/images/zdcy_top.png);
      background-repeat: no-repeat;
      background-size: cover;
      font-size: 46px;
      font-weight: 400;
      color: #ade2fd;

      .organization-tabs-zdcy {
        margin-top: 10px;
        display: flex;
        justify-content: center;

        .organization-body-zdcy {
          width: 100%;
          height: 52px;
          display: flex;
          // justify-content: space-around;
          align-items: center;

          > div {
            width: 140px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 18px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #d9f4ff;
            text-shadow: 1px 2px 5px rgba(7, 38, 87, 0.38);
            cursor: pointer;

            &.active {
              font-size: 24px;
              font-family: YouSheBiaoTiHei;
              font-weight: 400;
              color: #ffffff;
              text-shadow: 1px 2px 5px rgba(0, 62, 161, 0.84);
            }

            &:first-of-type {
              border-right: 1px solid #69bfff;
            }
          }
        }
      }
    }
  }
}

.heat_tab {
  position: absolute;
  right: 156px;
  top: 36px;
  z-index: 99;
  width: 51px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  // background-image: url(~img/images/light_back.png);
  background-repeat: no-repeat;
  background-size: cover;

  &.active {
    // background-image: url(~img/images/back_not.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  img {
    width: 24px;
    height: 24px;
  }
}

.map_tab {
  position: absolute;
  right: 76px;
  top: 36px;
  z-index: 99;
  width: 51px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  // background-image: url(~img/images/light_back.png);
  background-repeat: no-repeat;
  background-size: cover;

  &.active {
    // background-image: url(~img/images/back_not.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  img {
    width: 24px;
    height: 24px;
  }
}

.zdcy_switch_open {
  position: absolute;
  width: 150px;
  height: 75px;
  top: 0px;
  left: 0px;
  z-index: 124;
  // background-image: url(~img/images/zdcy.png);
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;

  &:hover {
    // background-image: url(~img/images/zdcydj.png);
  }
}

.zdcy_switch_close {
  position: absolute;
  width: 150px;
  height: 75px;
  top: 0px;
  left: 0px;
  z-index: 124;
  // background-image: url(~img/images/zdcyback.png);
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
</style>
<style lang="scss">
.amap-marker-info {
  position: absolute;
  left: 28px;
  top: 24px;
  width: 479px;
  height: 260px;
  // box-shadow: 0 3px 14px rgba(0, 0, 100, 0.6);
  // padding: 5px 10px;
  // background-color: #fff;
  // background-image: url(~img/images/company_detail.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 24px 0 40px;

  .score_A1 {
    background: #e7f3ea;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_A2 {
    background: #e7f3ea;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_A3 {
    background: #e7f3ea;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_B1 {
    background: #dceaf2;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_B2 {
    background: #dceaf2;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_B3 {
    background: #dceaf2;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_C1 {
    background: #f2ece6;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_C2 {
    background: #f2ece6;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_C3 {
    background: #f2ece6;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_D1 {
    background: #f3e9e8;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_D2 {
    background: #f3e9e8;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .score_D3 {
    background: #f3e9e8;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .map_score {
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6e6e1;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #000000;
    height: 23px;
    margin-right: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    // margin-top: 9px;
  }

  .map_score1 {
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_A1 {
    background: #239d2c;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_A2 {
    background: #4cb369;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_A3 {
    background: #39b1ad;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_B1 {
    background: #20acc5;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_B2 {
    background: #36a2e7;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_B3 {
    background: #3888d9;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_C1 {
    background: #eba612;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_C2 {
    background: #f68f29;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_C3 {
    background: #f26e00;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_D1 {
    background: #f6622e;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_D2 {
    background: #f6622e;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .level_D3 {
    background: #d32d18;
    padding: 0px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    height: 23px;
    color: #ffffff;
    margin-right: 10px;
  }

  .amap-bottom {
    margin-top: 6px;
    padding-left: 10px;
  }

  .amap-top {
    width: 417px;
    // height: 100px;
    border-bottom: 1px solid #d8dadb;
    padding-left: 10px;
    padding-bottom: 6px;
    display: flex;

    .amap-top-left {
      width: 343px;
      // height: 100px;
    }

    .amap-route {
      width: 60px;
      height: 60px;
      // background-image: url(~img/images/daohang.png);
      background-repeat: no-repeat;
      background-size: cover;
      cursor: pointer;
    }

    .body-name {
      font-size: 18px;
      font-family: Source Han Sans SC;
      font-weight: 500;
      // @include font_color('fontColor5');
    }

    .body-address {
      margin-top: 10px;
      display: flex;

      span {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;

        &:first-of-type {
          // @include font_color('fontColor7');
          color: #1985f3;
          // width: 46px;
        }

        &:nth-of-type(2) {
          // @include font_color('fontColor8');
          margin-left: 5px;
          width: 260px;
        }

        &:last-of-type {
          margin-left: auto;
          // @include font_color('fontColor8');
        }
      }
    }

    .amap-second {
      width: 100%;
      display: flex;
    }

    .amap-type {
      margin-top: 10px;
      background: #dbedff;
      border-radius: 4px;
      font-size: 12px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1985f3;
      padding: 2px 6px;
      margin-right: 6px;
    }
  }

  .body-label-right {
    margin-top: 8px;
    margin-left: 10px;
    display: flex;
    align-items: center;

    span {
      font-family: Source Han Sans SC;
      font-weight: bold;

      &:first-of-type {
        // margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        // @include font_color('fontColor7');
      }

      &:nth-of-type(2) {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }

      &:last-of-type {
      }
    }
  }

  // > i {
  //   font-size: 17px;
  //   font-weight: bold;
  //   color: #ff9900;
  //   margin-left: 10px;
  //   cursor: pointer;
  // }
}
.back_box{
  img{
    width:20px;
  }
}
</style>
